<template>
    <div class="content">
        <filter-data :showType='4' :showCategory="showCategory"/>

        <div class="table-head" v-show="showTable || showTableEmpty">
            <div class="head-left" :class="{'head-left-shadow': managerList.length > 0 ? true : false }">广告系列</div>
            <div class="head-right">成效</div>
        </div>

        <div class="table" >
            <el-table  v-show="showTableEmpty" style="width: 100%" empty-text=" ">
                <el-table-column label="广告系列名称" width="130"></el-table-column>
                <el-table-column label="广告组名称" width="130"></el-table-column>
                <el-table-column label="关键词" width="150"></el-table-column>
                <el-table-column label="广告名称" width="150"></el-table-column>
                <el-table-column label="广告内容" width="200"></el-table-column>
                <el-table-column label="已花费" width="150"></el-table-column>
                <el-table-column label="展示数" width="120"></el-table-column>
                <el-table-column label="点击数" width="120"></el-table-column>
                <el-table-column label="点击率" width="120"></el-table-column>
                <el-table-column :render-header="renderHeader" width="120"></el-table-column>
                <!--<el-table-column :render-header="renderHeader" width="120"></el-table-column>-->
            </el-table>
            <div class="empty-content" v-show="showTableEmpty">
                <div style="width: 100%">
                    <img src="../../../assets/img/no-data.png">
                </div>
                <span>暂无数据</span>
            </div>

            <loading :customClass="customLoading" v-if="showLoading"  />

            <el-table :data="managerList" style="width: 100%" v-show="showTable" empty-text=" " :row-class-name="tableRowClassName">
                <el-table-column fixed label="广告系列名称" width="130">
                    <template scope="scope">
                        <div v-show="scope.row.index == 0">
                            <div>{{scope.row.adSeriesName}}</div>
                            <el-switch class="create-switch"  style="margin: 20px 0"  @change="handleSwitchChange(scope.row,1)" v-model="scope.row.switchSeriesStatus" on-text="" off-text=""></el-switch>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed label="广告组名称" width="130">
                    <template scope="scope">
                        <div v-show="scope.row.index == 0">
                            <div>{{scope.row.adGroupName}}</div>
                            <el-switch class="create-switch" style="margin: 20px 0" @change="handleSwitchChange(scope.row,2)" v-model="scope.row.switchGroupStatus" on-text="" off-text=""></el-switch>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed label="关键词" width="150">
                    <template scope="scope">
                        <div v-show="scope.row.index == 0">
                            <div v-if="scope.row.incudeKeywords && scope.row.incudeKeywords.length">
                                <span v-for="(item,i) in scope.row.incudeKeywords">
                                    <span v-if='i == scope.row.incudeKeywords.length-1'>{{item.value }}</span>
                                    <span v-else>{{item.value+'、'}}</span>
                                </span>
                            </div>
                            <div v-if="!scope.row.incudeKeywords.length">
                                <span>——</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed label="广告名称" width="150">
                    <template scope="scope">
                        <div class="star-wrap" v-show="scope.row.isExcellent">
                            <img src="../../../assets/img/star.png">
                        </div>
                        <div>{{scope.row.adName}}</div>
                        <el-switch class="create-switch" style="margin: 20px 0" @change="handleSwitchChange(scope.row,3)" v-model="scope.row.switchAdStatus" on-text="" off-text=""></el-switch>
                    </template>
                </el-table-column>

                <el-table-column fixed label="广告内容" width="200">
                    <template scope="scope">
                        <el-tooltip placement="top">
                            <div slot="content">{{scope.row.adContentList[0].title1}}</div>
                            <div class="txt-wrap txt-wrap1 txt-message">{{scope.row.adContentList[0].title1}}</div>
                        </el-tooltip>
                        <el-tooltip placement="top">
                            <div slot="content">{{scope.row.adContentList[0].title2}}</div>
                            <div class="txt-wrap txt-wrap1 txt-message">{{scope.row.adContentList[0].title2}}</div>
                        </el-tooltip>
                        <div class="txt-url">{{scope.row.adContentList[0].link}}</div>
                        <el-tooltip placement="top">
                            <div slot="content">{{scope.row.adContentList[0].description}}</div>
                            <div class="txt-wrap">{{scope.row.adContentList[0].description}}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>

                <el-table-column prop="spend" label="已花费" width="150"></el-table-column>
                <el-table-column prop="impressions" label="展示数" width="120"></el-table-column>
                <el-table-column prop="clicks" label="点击数" width="120"></el-table-column>
                <el-table-column prop="clickCtr" label="点击率" width="120"></el-table-column>
                <el-table-column prop="cpc" :render-header="renderHeader" width="120"></el-table-column>
                <!--<el-table-column :render-header="renderHeader" width="120">-->
                    <!--<template scope="scope">-->
                        <!--<span v-if="scope.row.avgPosition">{{scope.row.avgPosition.toFixed(2)}}</span>-->
                    <!--</template>-->
                <!--</el-table-column>-->
            </el-table>

            <el-pagination
                    v-show="showTable"
                    class="pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="page.pageSizes"
                    :page-size="10"
                    layout="prev, pager, next, sizes, jumper"
                    :total="page.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import FilterData from '~/components/manager/google/filterData.vue'
    import loading from '~/components/loading.vue'
    import * as types from '../../../store/mutation-types/manager/index'
    import { getStatusName , getStatus ,switchStatus , getConnectType} from '~/assets/js/option'
    import { isInteger } from '~/assets/js/global'
    import Vue from 'vue'
    import { Table, TableColumn ,Button, Switch , Pagination, Tooltip, Message} from 'element-ui'
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Button);
    Vue.use(Switch);
    Vue.use(Pagination);
    Vue.use(Tooltip);

    export default{
        layout: 'google-manager',
        components: {
            FilterData,
            loading
        },
        data(){
            return {
                showLoading: false,
                customLoading : 'top:580px',
                showCategory: false,
                showTableEmpty:false,
                showTable:false,
                managerList: [],
                page: {
                    pageSizes: [10, 20, 50],    // 每页可选条数列表,
                    total: 0,
                    currentPage: 1
                },
                filter: {
                    pageNum: 1,
                    pageSize: 10,
                    localId: '',
                }
            }
        },
        methods: {
            //编辑广告系列状态
            handleSwitchChange(row,type) {
                switch (type){
                    case 1:
                        var filter={
                            localId: row.adSeriesId,
                            platFormId: row.adSeriesPlatformId,
                            status: switchStatus(row.switchSeriesStatus)
                        };
                        this.$store.dispatch('googleUpdateAdSeriesStatus',filter)
                            .then(response => {
                                if(response.data.code != 1){
                                    row.switchSeriesStatus = !row.switchSeriesStatus;
                                    row.seriesStatus = switchStatus(row.switchSeriesStatus);
                                }
                            })
                            .catch((error) => {
                                row.switchSeriesStatus = !row.switchSeriesStatus;
                                row.seriesStatus = switchStatus(row.switchSeriesStatus);
                            });
                        break;
                    case 2:
                        var filter={
                            localId: row.adGroupId,
                            platFormId: row.adGroupPlatformId,
                            status: switchStatus(row.switchGroupStatus)
                        };
                        this.$store.dispatch('googleuUdateAdGroupStatus',filter)
                            .then(response => {
                                if(response.data.code != 1){
                                    row.switchGroupStatus = !row.switchGroupStatus;
                                    row.groupStatus = switchStatus(row.switchGroupStatus);
                                }
                            })
                            .catch((error) => {
                                row.switchGroupStatus = !row.switchGroupStatus;
                                row.groupStatus = switchStatus(row.switchGroupStatus);
                            });
                        break;
                    case 3:
                        var filter={
                            localId: row.adId,
                            platFormId: row.adPlatformId,
                            adGroupId: row.adGroupPlatformId,
                            status: switchStatus(row.switchAdStatus)
                        };
                        this.$store.dispatch('googleUpdateAdStatus',filter)
                            .then(response => {
                                if(response.data.code != 1){
                                    row.switchAdStatus = !row.switchAdStatus;
                                    row.adsStatus = switchStatus(row.switchAdStatus);
                                }
                            })
                            .catch((error) => {
                                row.switchAdStatus = !row.switchAdStatus;
                                row.adsStatus = switchStatus(row.switchAdStatus);
                            });
                        break;
                }
            },

            //获取列表
            getManagerList(){
                this.showLoading = true;
                this.$store.dispatch('googleGetAbTestList',this.filter)
                    .then((response)=>{
                        var result=response.data;
                        if(result && result.code == 1){
                            var list = result.data.list;
                            if(list.length>0){
                                for (var i = 0; i < list.length;i++){
                                    list[i].index = i;
                                    list[i].spend = isInteger(list[i].spend, 1);
                                    list[i].clickCtr = isInteger(list[i].clickCtr, 2);
                                    list[i].cpm = isInteger(list[i].cpm, 1);
                                    list[i].cpc = isInteger(list[i].cpc, 1);
                                    if(list[i].isExcellent) {
                                        list[i].type = 'excellent';
                                    }
                                    list[i].switchGroupStatus = getStatus(list[i].adGroupStatus);
                                    list[i].switchSeriesStatus = getStatus(list[i].adSeriesStatus);
                                    list[i].switchAdStatus = getStatus(list[i].adStatus);
                                }
                                this.managerList = list;
                                this.showTable = true;
                                this.showTableEmpty = false;
                                this.showCategory = true;
                                this.showLoading = false;
                                this.page.total = result.data.total;
                                this.page.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
                                if(this.managerList.length>0){
                                    this.$store.commit(types.BUDGET_DATA_GOOGLE , {budgetDataGoogle: this.managerList[0].budgetScheduling})
                                }
                            }else{
                                this.showTableEmpty = true;
                                this.showTable = false;
                                this.showCategory = true;
                                this.showLoading = false;
                            }
                        }else {
                            this.showTableEmpty = true;
                            this.showTable = false;
                            this.showCategory = true;
                            this.showLoading = false;
                        }
                    })
                    .catch((error) => {
                        this.showTableEmpty = true;
                        this.showTable = false;
                        this.showCategory = true;
                        this.showLoading = false;
                    })
            },
            handleSizeChange(val) {
                this.filter.pageSize = val;
                this.filter.pageNum = 1;
                this.getManagerList();
            },
            handleCurrentChange(val) {
                this.filter.pageNum = val;
                this.getManagerList();
            },
            renderHeader(h, { column, $index }){
                switch ($index) {
                    case 9:
                        return (
                            <el-tooltip content="每点击成本" placement="top">
                        <div>CPC&nbsp;<i class="iconfont icon-tip" style="color: #B0BEC5;font-size:12px"></i></div>
                        </el-tooltip>
                    )
                        break;
                    case 10:
                        return (
                            <el-tooltip content="您的广告与其他广告相比的排名" placement="top">
                        <div>平均排名&nbsp;<i class="iconfont icon-tip" style="color: #B0BEC5;font-size:12px"></i></div>
                        </el-tooltip>
                    )
                        break;
                }
            },
            filterData(val,type) {
                switch (type){
                    case 5:
                        this.filter.localId = val.id;
                        this.getManagerList();
                        break;
                }
            },
            tableRowClassName(row, index) {
                if(row.type == 'excellent') {
                    return 'summary-row';
                }
                return '';
            },
        },
        created() {
            this.getManagerList();
        }
    }
</script>

<style scoped lang="scss">
    .content {
        max-width: 1200px;
        margin: 0 auto;
    .table-head {
        height: 47px;
        line-height: 44px;
        background: #F0F5F8;
        border: 1px solid #EAEEF0;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        font-family: MicrosoftYaHei-Bold;
        font-size: 13px;
        color: #666666;
        letter-spacing: 0;
        text-indent: 20px;
    .head-left {
        width: 760px;
        float: left;
    }
    .head-right {
        float: left;
    }
    }
    .icon-action {
        color: #B0BEC5;
        margin: 0 5px;
        cursor: pointer;
    }
    .pagination {
        float: right;
        padding: 20px 0 40px 0;
    }
    status-pot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .pot-blue {
        background: #0686F9;
    }
    .pot-red {
        background: #FF3526;
    }
    .pot-grey {
        background: #AAA;
    }
    .scope-img{
        width: 50px;
        height: 50px;
        margin-right: 10px;
        float: left;
    img{
        width: 100%;
        height: 100%;
    }
    }
    .empty-content {
        position: absolute;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    img {
        width: 100px;
        height: 100px;
    }
    span {
        font-size: 13px;
        color: #0686F9;
        letter-spacing: 0;
        margin: 20px 0 0 -26px;
        display:inline-block;
    }
    }
    .table{
        position: relative;
    }
    .star-wrap{
        width: 30px;
        margin: 0 auto;
        img{
            width: 100%;
        }
    }
    }


</style>
